<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <text class="back-icon">←</text>
            </view>
            <text class="header-title">公益组织</text>
        </view>

        <!-- 主要内容区域 -->
        <view class="content">
            <!-- 顶部介绍 -->
            <view class="intro-section">
<<<<<<< HEAD
                <image class="intro-image" src="/static/organization-banner.png" mode="aspectFill"></image>
                <view class="intro-overlay3">
=======
                <image class="intro-image" src="/static/organization-banner.jpg" mode="aspectFill"></image>
                <view class="intro-overlay">
>>>>>>> 73359ff (更新头像)
                    <text class="intro-title">公益组织</text>
                    <text class="intro-desc">连接爱心，共建美好社会</text>
                </view>
            </view>

            <!-- 搜索栏 -->
<<<<<<< HEAD
            <!-- <view class="search-section">
=======
            <view class="search-section">
>>>>>>> 73359ff (更新头像)
                <view class="search-bar">
                    <text class="search-icon">🔍</text>
                    <input class="search-input" type="text" placeholder="搜索公益组织" confirm-type="search"
                        @confirm="searchOrganizations" v-model="searchKeyword" />
                </view>
<<<<<<< HEAD
            </view> -->

            <!-- 组织分类 -->
            <!-- <view class="category-section">
=======
            </view>

            <!-- 组织分类 -->
            <view class="category-section">
>>>>>>> 73359ff (更新头像)
                <scroll-view class="category-scroll" scroll-x>
                    <view class="category-list">
                        <view class="category-item" :class="{ active: currentCategory === 'all' }"
                            @click="filterByCategory('all')">
                            <text class="category-text">全部</text>
                        </view>
                        <view class="category-item" :class="{ active: currentCategory === 'education' }"
                            @click="filterByCategory('education')">
                            <text class="category-text">教育</text>
                        </view>
                        <view class="category-item" :class="{ active: currentCategory === 'medical' }"
                            @click="filterByCategory('medical')">
                            <text class="category-text">医疗</text>
                        </view>
                        <view class="category-item" :class="{ active: currentCategory === 'environment' }"
                            @click="filterByCategory('environment')">
                            <text class="category-text">环保</text>
                        </view>
                        <view class="category-item" :class="{ active: currentCategory === 'poverty' }"
                            @click="filterByCategory('poverty')">
                            <text class="category-text">扶贫</text>
                        </view>
                        <view class="category-item" :class="{ active: currentCategory === 'children' }"
                            @click="filterByCategory('children')">
                            <text class="category-text">儿童</text>
                        </view>
                        <view class="category-item" :class="{ active: currentCategory === 'elderly' }"
                            @click="filterByCategory('elderly')">
                            <text class="category-text">老人</text>
                        </view>
                        <view class="category-item" :class="{ active: currentCategory === 'disaster' }"
                            @click="filterByCategory('disaster')">
                            <text class="category-text">救灾</text>
                        </view>
                    </view>
                </scroll-view>
<<<<<<< HEAD
            </view> -->
=======
            </view>
>>>>>>> 73359ff (更新头像)

            <!-- 推荐组织 -->
            <!-- <view class="section-title">
                <text class="title-text">推荐组织</text>
<<<<<<< HEAD
                
            </view> -->

            <view class="section-title list-title">
                <text class="title-text">推荐组织</text>
                <view class="filter-container">
                    <picker mode="selector" :range="sortOptions" @change="handleSortChange">
                    </picker>
                </view>
            </view>



            <div class="no-charity-org">
                <span class="title-text1">暂无推荐组织</span>
            </div>

            <!-- <view class="featured-orgs">
=======
            </view>

            <view class="featured-orgs">
>>>>>>> 73359ff (更新头像)
                <swiper class="featured-swiper" circular autoplay interval="4000" duration="500">
                    <swiper-item v-for="(org, index) in featuredOrganizations" :key="index">
                        <view class="featured-card" @click="navigateToDetail(org.id)">
                            <image class="featured-image" :src="org.banner" mode="aspectFill"></image>
                            <view class="featured-info">
                                <view class="featured-header">
                                    <image class="featured-logo" :src="org.logo" mode="aspectFit"></image>
                                    <view class="featured-title-container">
                                        <text class="featured-title">{{ org.name }}</text>
                                        <view class="featured-verify">
                                            <text class="verify-icon">✓</text>
                                            <text class="verify-text">已认证</text>
                                        </view>
                                    </view>
                                </view>
                                <text class="featured-desc">{{ org.description }}</text>
                                <view class="featured-stats">
                                    <text class="stats-item">{{ org.projects }}个项目</text>
                                    <text class="stats-item">{{ org.followers }}人关注</text>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
<<<<<<< HEAD
            </view>  -->

            <!-- 组织列表 -->
            <view class="section-title list-title">
                <text class="title-text">全部组织</text>
                <view class="filter-container">
                    <picker mode="selector" :range="sortOptions" @change="handleSortChange">
                        <!-- <view class="filter-button">
                            <text class="filter-text">{{ currentSort }}</text>
                            <text class="filter-icon">▼</text>
                        </view> -->
                    </picker>
                </view>
            </view>
=======
            </view> -->

            <!-- 组织列表 -->
            <!-- <view class="section-title list-title">
                <text class="title-text">全部组织</text>
                <view class="filter-container">
                    <picker mode="selector" :range="sortOptions" @change="handleSortChange">
                        <view class="filter-button">
                            <text class="filter-text">{{ currentSort }}</text>
                            <text class="filter-icon">▼</text>
                        </view>
                    </picker>
                </view>
            </view> -->
>>>>>>> 73359ff (更新头像)

            <!-- <view class="org-list">
                <view class="org-item" v-for="(org, index) in organizations" :key="index"
                    @click="navigateToDetail(org.id)">
                    <image class="org-logo" :src="org.logo" mode="aspectFit"></image>
                    <view class="org-info">
                        <view class="org-header">
                            <text class="org-name">{{ org.name }}</text>
                            <view class="org-verify" v-if="org.verified">
                                <text class="verify-icon">✓</text>
                                <text class="verify-text">已认证</text>
                            </view>
                        </view>
                        <text class="org-desc">{{ org.description }}</text>
                        <view class="org-tags">
                            <text class="org-tag" v-for="(tag, tagIndex) in org.tags" :key="tagIndex">{{ tag }}</text>
                        </view>
                        <view class="org-footer">
                            <text class="org-projects">{{ org.projects }}个项目</text>
                            <text class="follow-btn" :class="{ followed: org.isFollowed }"
                                @click.stop="toggleFollow(index)">
                                {{ org.isFollowed ? '已关注' : '+ 关注' }}
                            </text>
                        </view>
                    </view>
                </view>
            </view> -->

            <!-- 加载更多 -->
            <!-- <view class="load-more" @click="loadMore">
                <text class="load-more-text">{{ isLoading ? '加载中...' : '加载更多' }}</text>
            </view> -->

<<<<<<< HEAD
            <div class="no-charity-org">
                <span class="title-text1">暂无公益组织</span>
            </div>
=======
            <view style="display: flex; justify-content: center; align-items: center; height: 100px; color: #999; font-size: 14px;">
                <text class="title-text">暂无公益组织</text>
            </view>
>>>>>>> 73359ff (更新头像)
        </view>
    </view>
</template>

<script>
export default {
    data() {
<<<<<<< HEAD
        // return {
        //     searchKeyword: '',
        //     currentCategory: 'all',
        //     sortOptions: ['综合排序', '最新加入', '项目最多'],
        //     currentSort: '综合排序',
        //     isLoading: false,
        //     featuredOrganizations: [
        //         {
        //             id: 1,
        //             name: '中国红十字会',
        //             logo: '/static/org-redcross.png',
        //             banner: '/static/org-redcross-banner.jpg',
        //             description: '中国红十字会是中国最大的人道主义组织，致力于保护人的生命和健康，促进人类和平进步事业。',
        //             projects: 156,
        //             followers: 25600
        //         },
        //         {
        //             id: 2,
        //             name: '壹基金',
        //             logo: '/static/org-one.png',
        //             banner: '/static/org-one-banner.jpg',
        //             description: '壹基金是一家民间公益组织，专注于灾害救助、儿童关怀与发展、公益支持与创新等领域。',
        //             projects: 89,
        //             followers: 18900
        //         },
        //         {
        //             id: 3,
        //             name: '联合国儿童基金会',
        //             logo: '/static/org-unicef.png',
        //             banner: '/static/org-unicef-banner.jpg',
        //             description: '联合国儿童基金会致力于保障全球儿童的生存、保护和发展权利，为儿童创造更美好的未来。',
        //             projects: 210,
        //             followers: 32100
        //         }
        //     ],
        //     organizations: [
        //         {
        //             id: 4,
        //             name: '希望工程',
        //             logo: '/static/org-hope.png',
        //             description: '希望工程是中国青少年发展基金会实施的一项社会公益事业，旨在帮助贫困地区失学儿童重返校园。',
        //             verified: true,
        //             tags: ['教育', '儿童', '扶贫'],
        //             projects: 125,
        //             isFollowed: false
        //         },
        //         {
        //             id: 5,
        //             name: '中国扶贫基金会',
        //             logo: '/static/org-poverty.png',
        //             description: '中国扶贫基金会是专门从事扶贫开发的全国性公募基金会，致力于改善贫困人口的生产生活条件。',
        //             verified: true,
        //             tags: ['扶贫', '农村发展', '教育'],
        //             projects: 98,
        //             isFollowed: true
        //         },
        //         {
        //             id: 6,
        //             name: '爱德基金会',
        //             logo: '/static/org-amity.png',
        //             description: '爱德基金会是中国本土的非营利组织，致力于促进教育、社会福利、卫生健康、社区发展等公益事业。',
        //             verified: true,
        //             tags: ['社区发展', '教育', '医疗'],
        //             projects: 76,
        //             isFollowed: false
        //         },
        //         {
        //             id: 7,
        //             name: '阿拉善SEE生态协会',
        //             logo: '/static/org-see.png',
        //             description: '阿拉善SEE生态协会是中国首家由企业家发起的环保公益组织，致力于荒漠化防治和生物多样性保护。',
        //             verified: true,
        //             tags: ['环保', '生态保护', '可持续发展'],
        //             projects: 45,
        //             isFollowed: false
        //         },
        //         {
        //             id: 8,
        //             name: '春苗营养计划',
        //             logo: '/static/org-spring.png',
        //             description: '春苗营养计划是一项针对贫困地区儿童营养改善的公益项目，旨在提高儿童的营养健康水平。',
        //             verified: false,
        //             tags: ['儿童', '健康', '营养'],
        //             projects: 32,
        //             isFollowed: false
        //         }
        //     ]
        //};
=======
        return {
            searchKeyword: '',
            currentCategory: 'all',
            sortOptions: ['综合排序', '最新加入', '项目最多'],
            currentSort: '综合排序',
            isLoading: false,
            featuredOrganizations: [
                {
                    id: 1,
                    name: '中国红十字会',
                    logo: '/static/org-redcross.png',
                    banner: '/static/org-redcross-banner.jpg',
                    description: '中国红十字会是中国最大的人道主义组织，致力于保护人的生命和健康，促进人类和平进步事业。',
                    projects: 156,
                    followers: 25600
                },
                {
                    id: 2,
                    name: '壹基金',
                    logo: '/static/org-one.png',
                    banner: '/static/org-one-banner.jpg',
                    description: '壹基金是一家民间公益组织，专注于灾害救助、儿童关怀与发展、公益支持与创新等领域。',
                    projects: 89,
                    followers: 18900
                },
                {
                    id: 3,
                    name: '联合国儿童基金会',
                    logo: '/static/org-unicef.png',
                    banner: '/static/org-unicef-banner.jpg',
                    description: '联合国儿童基金会致力于保障全球儿童的生存、保护和发展权利，为儿童创造更美好的未来。',
                    projects: 210,
                    followers: 32100
                }
            ],
            organizations: [
                {
                    id: 4,
                    name: '希望工程',
                    logo: '/static/org-hope.png',
                    description: '希望工程是中国青少年发展基金会实施的一项社会公益事业，旨在帮助贫困地区失学儿童重返校园。',
                    verified: true,
                    tags: ['教育', '儿童', '扶贫'],
                    projects: 125,
                    isFollowed: false
                },
                {
                    id: 5,
                    name: '中国扶贫基金会',
                    logo: '/static/org-poverty.png',
                    description: '中国扶贫基金会是专门从事扶贫开发的全国性公募基金会，致力于改善贫困人口的生产生活条件。',
                    verified: true,
                    tags: ['扶贫', '农村发展', '教育'],
                    projects: 98,
                    isFollowed: true
                },
                {
                    id: 6,
                    name: '爱德基金会',
                    logo: '/static/org-amity.png',
                    description: '爱德基金会是中国本土的非营利组织，致力于促进教育、社会福利、卫生健康、社区发展等公益事业。',
                    verified: true,
                    tags: ['社区发展', '教育', '医疗'],
                    projects: 76,
                    isFollowed: false
                },
                {
                    id: 7,
                    name: '阿拉善SEE生态协会',
                    logo: '/static/org-see.png',
                    description: '阿拉善SEE生态协会是中国首家由企业家发起的环保公益组织，致力于荒漠化防治和生物多样性保护。',
                    verified: true,
                    tags: ['环保', '生态保护', '可持续发展'],
                    projects: 45,
                    isFollowed: false
                },
                {
                    id: 8,
                    name: '春苗营养计划',
                    logo: '/static/org-spring.png',
                    description: '春苗营养计划是一项针对贫困地区儿童营养改善的公益项目，旨在提高儿童的营养健康水平。',
                    verified: false,
                    tags: ['儿童', '健康', '营养'],
                    projects: 32,
                    isFollowed: false
                }
            ]
        };
>>>>>>> 73359ff (更新头像)
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        navigateToDetail(id) {
            uni.navigateTo({
                url: `/pages/storylibrary/activity/organization/detail?id=${id}`
            });
        },
        searchOrganizations() {
            if (this.searchKeyword.trim()) {
                uni.showToast({
                    title: `正在搜索: ${this.searchKeyword}`,
                    icon: 'none'
                });
                // 实际应用中这里应该根据关键词搜索数据
            }
        },
        filterByCategory(category) {
            this.currentCategory = category;
            // 实际应用中这里应该根据分类筛选数据
            uni.showToast({
                title: `已选择${category}分类`,
                icon: 'none'
            });
        },
        handleSortChange(e) {
            const index = e.detail.value;
            this.currentSort = this.sortOptions[index];
            // 实际应用中这里应该根据排序方式重新获取数据
        },
        toggleFollow(index) {
            this.organizations[index].isFollowed = !this.organizations[index].isFollowed;
            const action = this.organizations[index].isFollowed ? '关注' : '取消关注';
            uni.showToast({
                title: `已${action}${this.organizations[index].name}`,
                icon: 'none'
            });
        },
        loadMore() {
            this.isLoading = true;
            // 模拟加载更多数据
            setTimeout(() => {
                this.isLoading = false;
                uni.showToast({
                    title: '没有更多数据了',
                    icon: 'none'
                });
            }, 1500);
        }
    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    position: absolute;
    left: 30rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-icon {
    font-size: 40rpx;
    color: #333333;
}

.header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
}

.content {
    margin-top: 90rpx;
    padding-bottom: 50rpx;
}

.intro-section {
    position: relative;
    width: 100%;
    height: 350rpx;
}

.intro-image {
    width: 100%;
    height: 100%;
}

<<<<<<< HEAD
.intro-overlay3 {
=======
.intro-overlay {
>>>>>>> 73359ff (更新头像)
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
<<<<<<< HEAD
    background: linear-gradient(to bottom, rgba(81, 183, 242, 0.744), rgba(255, 253, 253, 0.097));
=======
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
>>>>>>> 73359ff (更新头像)
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30rpx;
}

.intro-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10rpx;
}

.intro-desc {
    font-size: 28rpx;
    color: #ffffff;
    opacity: 0.9;
}

.search-section {
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    margin-bottom: 20rpx;
}

.search-bar {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    padding: 15rpx 20rpx;
}

.search-icon {
    font-size: 28rpx;
    margin-right: 10rpx;
    color: #999999;
}

.search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
}

.category-section {
    background-color: #ffffff;
    margin-bottom: 20rpx;
}

.category-scroll {
    white-space: nowrap;
    padding: 20rpx 0;
}

.category-list {
    display: inline-flex;
    padding: 0 20rpx;
}

.category-item {
    display: inline-block;
    padding: 10rpx 30rpx;
    margin-right: 20rpx;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    transition: all 0.3s;
}

.category-item.active {
    background-color: #1890ff;
}

.category-text {
    font-size: 26rpx;
    color: #666666;
}

.category-item.active .category-text {
    color: #ffffff;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 30rpx 20rpx;
}

.title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
}

.featured-orgs {
    padding: 0 20rpx 30rpx;
    background-color: #ffffff;
}

.featured-swiper {
    height: 400rpx;
}

.featured-card {
    height: 100%;
    border-radius: 15rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.featured-image {
    width: 100%;
    height: 200rpx;
}

.featured-info {
    padding: 20rpx;
    background-color: #ffffff;
}

.featured-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
}

.featured-logo {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    margin-right: 15rpx;
}

.featured-title-container {
    flex: 1;
}

.featured-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 5rpx;
}

.featured-verify {
    display: flex;
    align-items: center;
}

.verify-icon {
    font-size: 20rpx;
    color: #ffffff;
    background-color: #52c41a;
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5rpx;
}

.verify-text {
    font-size: 22rpx;
    color: #52c41a;
}

.featured-desc {
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 15rpx;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.featured-stats {
    display: flex;
}

.stats-item {
    font-size: 24rpx;
    color: #999999;
    margin-right: 20rpx;
}

.list-title {
    background-color: #ffffff;
    margin-bottom: 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.filter-container {
    display: flex;
}

.filter-button {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}

.filter-text {
    font-size: 24rpx;
    color: #666666;
    margin-right: 10rpx;
}

.filter-icon {
    font-size: 20rpx;
    color: #999999;
}

.org-list {
    background-color: #ffffff;
    padding: 0 20rpx;
}

.org-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.org-logo {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.org-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.org-header {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}

.org-name {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-right: 10rpx;
}

.org-verify {
    display: flex;
    align-items: center;
}

.org-desc {
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 15rpx;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.org-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15rpx;
}

.org-tag {
    font-size: 22rpx;
    color: #1890ff;
    background-color: #e6f7ff;
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
}

.org-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.org-projects {
    font-size: 24rpx;
    color: #999999;
}

.follow-btn {
    font-size: 24rpx;
    color: #1890ff;
    background-color: #e6f7ff;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}

.follow-btn.followed {
    color: #999999;
    background-color: #f5f5f5;
}

.load-more {
    text-align: center;
    padding: 30rpx 0;
}

.load-more-text {
    font-size: 26rpx;
    color: #999999;
}
<<<<<<< HEAD

.no-charity-org {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #6a6060;
    font-size: 14px;
}

.title-text1 {
    color: #c7c7c7;
    font-size: 14px;
}
=======
>>>>>>> 73359ff (更新头像)
</style>

